<template>
  <!-- 页面的大盒子 -->
  <div class="page">
    <!-- 登录的盒子 -->
    <div class="login-box">
      <h1 class="title">极客园</h1>

      <!-- 表单 -->
      <!-- el-form 标签是表单的容器，身上的 :model="form" 属性，指定了采集到的数据，要存储到哪个对象中 -->
      <!-- from form -->
      <!-- ruler rule -->
      <!-- 2. 给 el-form 标签，添加 :rules="校验对象" 的属性绑定 -->
      <el-form :model="form" :rules="formRules" ref="formRef">
        <!-- el-form-item 是表单项（一行） -->
        <!-- 3. 给表单项的元素 el-form-item 添加 prop="校验规则名字" 的属性 -->
        <el-form-item prop="phone">
          <!-- 表单元素 -->
          <!-- 在文本框上，有一个 placeholder 默认的提示消息 -->
          <el-input v-model="form.phone" :prefix-icon="Cellphone" placeholder="请填写11位手机号" />
        </el-form-item>

        <el-form-item prop="code">
          <!-- 表单元素 -->
          <el-input
            v-model="form.code"
            style="width: 70%"
            :prefix-icon="Lock"
            show-password
            placeholder="请输入6位数字验证码"
          />
          <!-- 元素上的 :disabled 值如果为 true，表示禁用元素，否则是启用元素 -->
          <el-button type="primary" :disabled="isDown" style="width: 30%" @click="sendCode">
            <!-- 使用 v-if 指令配合 v-else 指令，实现元素的互斥展示 -->
            <!-- 如果 v-if 指令的值为 true，则展示被 v-if 控制的元素，否则展示被 v-else 控制的元素 -->
            <span v-if="isDown">{{ count }}秒后重发</span>
            <span v-else>发送验证码</span>
          </el-button>
        </el-form-item>

        <el-form-item>
          <!-- 许可协议的复选框 -->
          <el-checkbox label="我已阅读并同意用户协议和隐私条款" v-model="form.status" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
// 导入需要的 icon 图标
import { Cellphone, Lock } from '@element-plus/icons-vue'
// 按需导入接口
import { getCodeApi, loginApi } from '../../api'
// 导入消息弹窗组件
import { ElMessage } from 'element-plus'
// 导入 Store 中的 userStore
import useUserStore from '../../store/userStore'
// 导入路由提供的一个 hook 函数
import { useRouter } from 'vue-router'
// 按需导入倒计时的 hooks 函数
import { useCountDown } from '../../hooks'

// 调用 useUserStore() 函数，得到 userStore 对象
const userStore = useUserStore()
// 调用 useRouter() 这个 hook 函数，返回一个“导航对象”
const router = useRouter()
// 调用 useCountDown() hooks 函数
// 对象的解构语法
const { count, isDown, start } = useCountDown(10)

// 创建表单组件的引用对象
const formRef = ref(null)

// 表单的数据对象，表单采集到的数据，会存储到这个对象中
const form = reactive({
  phone: '13800000001',
  code: '',
  status: false
})

// 1. 创建校验对象
const formRules = {
  // 表示要校验名字是 phone 的这份数据
  // phone: [必填项的校验规则对象, 11位手机号的校验规则对象],
  phone: [
    // 必填项校验
    { required: true, message: '手机号不能为空！' },
    // 正则校验
    { pattern: /^1[3-9]\d{9}$/, message: '请填写11位的手机号！' }
  ],
  // 表示要校验名字是 code 的这份数据
  // code: [必填项的校验规则对象, 6位数字的校验规则对象]
  code: [
    // 必填项
    { required: true, message: '验证码不能为空！' },
    // 正则校验
    { pattern: /^\d{6}$/, message: '请填写6位数字的验证码！' }
  ]
}

// 点击按钮，发送验证码
const sendCode = () => {
  // 1. 校验手机号格式是否正确
  // 2. 手机号格式正确后，再封装并调用接口，从而下发验证码
  formRef.value.validateField('phone', async (vr) => {
    // 校验通过后 vr 的值是 true，否则是 false
    if (!vr) return

    // 开启倒计时
    start()
    // 封装并调用接口
    const result = await getCodeApi(form.phone)
    // 把接口返回的验证码，回填到表单中
    form.code = result.data.code
  })
}

// 此函数用于处理登录的业务逻辑
const onSubmit = () => {
  // 1. 判断是否勾选了许可协议
  // 2. 如果勾选了，在进一步判断整个表单的数据是否合法
  // 3. 如果表单格式校验通过，则封装和调用接口
  if (!form.status) {
    // 提示用户：请先阅读和勾选许可协议！
    ElMessage.error('请先阅读和勾选许可协议！')
    return
  }

  // 调用 formRef.value.validate(fn) 对整个表单做校验
  formRef.value.validate(async (vr) => {
    console.log('----整个表单的校验结果----')
    console.log(vr)

    // 校验不通过
    if (!vr) {
      ElMessage.error('请完善登录的表单！')
      return
    }

    // 校验通过
    // 封装并调用登录的接口
    const result = await loginApi(form)
    // 把登录成功后得到的 token，存入全局仓库中
    userStore.updateToken(result.data.token)
    // 跳转到后台主页
    router.push('/')
    // 提示登录成功
    ElMessage.success('登录成功！')
  })
}
</script>

<style scoped>
.page {
  background: linear-gradient(45deg, red, blue);
  /* vh 是浏览器视口的高度 */
  /* vw 是浏览器视口的宽度 */
  height: 100vh;

  /* 登录的盒子 */
  .login-box {
    width: 400px;
    height: 300px;
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;

    /* 把盒子放到页面正中间 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* 标题样式 */
    .title {
      text-align: center;
      font-style: italic;
      color: orangered;
      margin-bottom: 15px;
    }
  }
}
</style>
